<template>
  <div style="width: 100%; height: 100%">
    <div class="person-top">
      <div class="person-top-img"></div>
    </div>
    <div class="user-img-group">
      <div class="user-img-radius">
        <!-- doctor.png -->
        <img
          class="person-top-userimg"
          src="../../../assets/img/doctor.png"
        >
        <div class="person-top-name">{{username.realname}}
          {{username.mobile}}
        </div>
        <div class="person-top-name33">{{username.mobile}}</div>
      </div>

      
    </div>
    <div class="nav-group-list">
        <van-cell-group>
          <!-- <van-cell icon="coupon-o" title="手机号{username.mobile}" /> -->
            <!-- <van-cell icon="coupon-o" title="个人模板" is-link @click="$router.push({path:'/mobile/admin/mineTemplate'})" /> -->
            <!-- <van-cell icon="phone-o" title="绑定手机" is-link @click="$router.push({path:'/mobile/admin/mobile'})"/> -->
            <van-cell icon="manager-o" title="修改密码" is-link  @click="$router.push({path:'/mobile/admin/restPassword'})"/>
        </van-cell-group>
    </div>
    <div style="padding:20px;">
        <van-button round type="info" block @click="submitForm">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Toast,Icon,Cell, CellGroup,Button} from "vant";
export default {
  name:'mobileMine',
    components:{[Icon.name]: Icon,[Cell.name]: Cell,[CellGroup.name]: CellGroup,[Button.name]: Button},
  data: function () {
    return {
      isMobile: this.$isMobile,
      param: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
   computed: {
    username () {
      let userInfo = localStorage.getItem('userInfo');
      return userInfo ? JSON.parse(userInfo) : {realname:this.name};
    }
  },
  mounted() {
    
  },
  methods: {

    submitForm() {
      const loading = this.$loading({text: '退出中...'});

   
                    window.sessionStorage.removeItem('userName')
                    window.sessionStorage.removeItem('jqzxUserId')

                           loading.close();
                    // Bus.$emit("global-close-open", false);
                        //  this.$router.push('/login');
                          this.$router.push('./login');
                    // this.$router.push('./mobile/admin/login');
 
    },

    submitFormbak() {
      const loading = this.$loading({text: '退出中...'});
        this.$http.post(this.$API.LOGOUT,{})
                .then((res)=>{
                  loading.close();
                  console.log('登录信息1',res.code)
                  if(res.code == 1){
                    console.log('登录信息122',res.code)
                    window.sessionStorage.removeItem('userName')
                    window.sessionStorage.removeItem('jqzxUserId')
                    // Bus.$emit("global-close-open", false);
                        //  this.$router.push('/login');
                          this.$router.push('./login');
                    // this.$router.push('./mobile/admin/login');
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  loading.close();
                      // this.$router.push('./login');
                  this.$message.error('网络错误,请检查网络状况!');
                })
    },
    getQueryVariable(variable) {
      var query = window.location.hash,
        vars = [];
      if (query && query.indexOf("?") !== -1) {
        vars = query.split("?");
      }
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return decodeURIComponent(pair[1]);
        }
      }
      return "";
    },
  },
};
</script>

<style scoped>
.person-top {
  position: relative;
  height: 130px;
}
.person-top-img {
  box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  background-color: #409EFF;
  border-radius: 0 0 50% 50%;
  height: 130px;
}
.user-img-radius {
  position: relative;
  margin-top: -60px;
  width: 110px;
  height: 110px;
  box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
.user-img-group {
  display: flex;
  justify-content: center;
}
.person-top-userimg {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}
.person-top-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 12px;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #fff;
}
.person-top-btn {
  position: absolute;
  top: 220px;
  right: 6%;
  font-size: 28px;
  padding: 12px 30px;
  border-radius: 30px;
  background-color: #fafafa;
  font-size: 28px;
  box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.1);
}
.nav-group-list {
  padding: 30px 8px;
}
.nav-bar-list {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
}
.nav-bar-list::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: #eeb448;
}
.nav-bar-icon {
  font-size: 42px;
  color: #eeb448;
  margin-right: 30px;
}
.nav-bar-icon-right {
  right: 20px;
  font-size: 28px;
  color: #888;
}
.nav-bar-span {
  font-size: 24px;
  color: #666;
}
.button-setting {
  height: 90px;
}
.not-register {
  right: 60px;
  font-size: 28px;
  color: red;
}
</style>